<template>
  <nut-navbar title="个人中心" />
  <section class="hasMainbar">
    <nut-cell title="头像" v-if="store.userInfo.avatar !== ''">
      <template #desc>
        <nut-avatar>
          <img :src="cfg.imageUrl(store.userInfo.avatar)" />
        </nut-avatar>
      </template>
    </nut-cell>
    <nut-cell title="用户名" :desc="store.userInfo.username" />
    <nut-cell title="个人资料" @click="handleRouter('my_info')" />
    <nut-cell title="我的课程" @click="handleRouter('my_lesson')" />
    <nut-cell title="我的订单" @click="handleRouter('my_order')" />
    <nut-cell title="退出" @click="handleLogout" />
  </section>
  <MainBar :active="3" />
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import cfg from '@/config/config'
import MainBar from '@/components/mainbar/index.vue'

const store = useAuthStore()
const router = useRouter()

const handleRouter = (name: string) => {
  router.push({ name })
}

const handleLogout = () => {
  store.logout()
  router.push({ name: 'home' })
}
</script>
